<template>
    <div class="coupon-box">
        <div class="coupon-main" style="">
            <div class="coupon-show">
                <img
                    :src="couponObj.shopAvatar ? $imgUrlHead + couponObj.shopAvatar : require('@/assets/images/head-default.png')"
                    class="main-logo"
                />
                <p class="coupon-main_name">{{ couponObj.shopName }}</p>
                <p class="coupon-main_tip">{{ couponObj.couponName }}</p>
                <div class="coupon-receive-box">
                    <div class="receive-title">满{{ couponObj.fullPrice }}元使用</div>
                    <div class="pro-price">
                        <span class="price">
                            ￥
                            <em class="now">{{ couponObj.offPrice }}</em>
                            元
                        </span>
                    </div>
                    <div class="receive-time">
                        有效期：{{ couponObj.startDate | dateformat('YYYY-MM-DD') }} 至 {{ couponObj.endDate | dateformat('YYYY-MM-DD') }}
                    </div>
                </div>
                <template v-if="couponObj.status == 1 || couponObj.status == 2 || couponObj.status == 3">
                    <div class="btn" @click="trigger(couponObj.flag, couponObj.couponId)">{{ couponObj.flag ? '立即使用' : '立即领取' }}</div>
                </template>
                <template v-if="couponObj.status == -1">
                    <div class="btn fail" @click="trigger(couponObj.flag, couponObj.couponId)">已失效</div>
                </template>
                <template v-if="couponObj.status == 0">
                    <div class="btn fail" @click="trigger(couponObj.flag, couponObj.couponId)">已下线</div>
                </template>
                <template v-if="couponObj.status == 4">
                    <div class="btn fail" @click="trigger(couponObj.flag, couponObj.couponId)">已失效</div>
                </template>
                <template v-if="couponObj.status == 5">
                    <div class="btn fail" @click="trigger(couponObj.flag, couponObj.couponId)">已抢光</div>
                </template>
                <div class="share-text" @click="share">分享给微信好友</div>
            </div>

            <!-- 版权信息 -->

            <div style="" class="copyrightInfo">
                <div class="ft-links">
                    <span class="" @click="goIndex">店铺主页</span>
                    <span class="" @click="goRecCenter">领券中心</span>
                    <span class="" @click="goMy">个人中心</span>
                </div>
                <copyrightInfo></copyrightInfo>
            </div>
        </div>

        <share-sheet
            ref="shareSheet"
            :prames="shareConfig"
            :shareType="[
                { type: 'link', text: '复制链接', img: require('@/assets/images/ext-link.png') },
                { type: 'wx', text: '分享好友', img: require('@/assets/images/ext-wx.png') }
            ]"
        >
            <div class="share-value" slot="top">召唤小伙伴一起来抢，名额有限，快来抢</div>
        </share-sheet>
    </div>
</template>

<script>
import copyrightInfo from 'components/copyrightInfo/copyrightInfo'
import shareSheet from 'components/share/shareSheet'
import { getCouponDetail, receive } from 'api/coupon'
export default {
    components: {
        copyrightInfo,
        shareSheet
    },
    data() {
        return {
            couponObj: {}, //接受数据
            couponState: '', //优惠券状态
            shareConfig: {},
            shareUrl: window.location.href //分享的链接
        }
    },
    mounted() {
        let couponId = this.$route.query.couponId
        getCouponDetail(couponId)
            .then((res) => {
                if (res.status == 1) {
                    res.result.flag = res.result.status == 3 ? true : false
                    this.couponObj = res.result
                } else {
                    this.$toast(res.msg)
                }
            })
            .catch((e) => {
            })
    },
    methods: {
        trigger(flag, couponId) {
            // 优惠券状态 有效: 1 失效(过期): -1 下线： 0, 已领取 2, 领取链接无效 3
            if (flag) {
                this.$router.push({
                    path: `/searchList`,
                    query: {
                        // couponDesc: item.couponDesc,
                        source: 'coupon',
                        couponId: couponId
                    }
                })
                return
            }
            this.getCoupon(couponId)
        },
        //领取优惠券
        getCoupon(couponId) {
            let that = this
            receive({ couponId: couponId }).then((res) => {
                if (res.status == 1 || res.status == 2 || res.status == 3) {
                    that.$toast({ duration: 1500, message: res.result ? res.result : res.msg })
                    that.couponObj.flag = true
                } else {
                    that.$toast({ duration: 1500, message: res.msg })
                }
                that.couponObj.flag = res.status
            })
        },
        share() {
            this.$refs.shareSheet.sheetShow = true
            this.shareConfig.shareText = `我抢到优惠券啦！召唤小伙伴一起来抢，名额有限，快来抢！${this.shareUrl}`
        },
        goIndex() {
            this.$router.push('/')
        },
        goRecCenter() {
            this.$router.push('/walletModules/recCenter/recCenter')
        },
        goMy() {
            this.$router.push('/my')
        }
    }
}
</script>

<style lang="stylus" scoped>
.coupon-box {
    width: 100%;
    height: 100%;
	padding-bottom: 2.70rem;
	box-sizing:content-box;
    .coupon-main {
        width: 100%;
        height: 100%;
        background: url('~@/assets/images/coupon-bg.png') no-repeat center/cover;
        background-size: 100% 100%;
        padding-top: 0.96rem;

        .coupon-show {
            position: relative;
            margin: 0 auto 0;
            width: 6.30rem;
            height: 7.70rem;
            text-align: center;
            background: url('~@/assets/images/coupon-bg1.png') no-repeat center/cover;
            background-size: 100% 100%;
            .main-logo {
                position: absolute;
                top: -0.3rem;
                left: 50%;
                margin-left: -0.70rem;
                width: 1.20rem;
                height: 1.20rem;
                border-radius: 50%;
                border: 0.12rem solid #fff;
                background: #fff;
            }
            .coupon-main_name {
                padding-top: 1.18rem;
                font-size: 14px;
                line-height: 0.40rem;
                margin-bottom: 0.10rem;
            }
            .coupon-main_tip {
                font-size: 14px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .coupon-receive-box {
                position: relative;
                width: 4.96rem;
                height: 2.62rem;
                margin: 0.69rem auto 0;
                text-align: center;
                background: url('~@/assets/images/coupon-bg2.png') no-repeat center/cover;
                background-size: 100% 100%;
                .receive-title {
                    padding-top: .45rem;
                    margin-bottom: .10rem;
                    font-size: 12px;
                    font-weight:400;
                    color:rgba(51, 51, 51, 1);
                }
                .pro-price {
                    font-size: 14px;
                    .price {
                        display: block;
                        font-family: arial;
                        text-align: center;
                        color: #FDBB4A;
                        font-weight:bold;
                    }
                    .now {
                        font-size: 40px;
                        color: #FDBB4A;
                        font-weight:bold;
                    }
                }
                .receive-time {
                    margin-top: 0.10px;
                    font-size: 10px;
                    opacity: 0.5;
                    color:rgba(51, 51, 51, 1);
                }
            }
            .btn {
                padding: 0.22rem 1.20rem;
                background: #F44043;
                border-radius: 50px;
                color: #fff;
                font-size: 16px;
                display: inline-block;
                margin-top: 0.33rem;
                &.fail {
                    background: #c8c9cc;
                }
            }
            .share-text {
                font-size: 12px;
                font-family:Alibaba PuHuiTi;
                font-weight:400;
                color:rgba(51, 51, 51, 1);
                margin-top: 0.40rem;
            }
        }
        .copyrightInfo {
            position: fixed;
            padding-top: 0.53rem;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2.70rem;
            background: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			    // position: fixed;
			    // /* padding-top: 0.53rem; */
			    // bottom: 0;
			    // left: 0;
			    // width: 100%;
			    // height: 120px;
			    // background: #fff;


            .ft-links {
                text-align: center;
                span {
                    color: #999;
                    font-size: 12px;
                }
            }

            .ft-links span:not(:last-child)::after {
                display: inline-block;
                content: '';
                width: 0.02rem;
                height: 0.17rem;
                background: #e4e4e4;
                margin: 0 0.20rem;
            }

            .ft-links>span:not(:last-child)::after {
                display: inline-block;
                content: '';
                width: 0.02rem;
                height: 0.17rem;
                background: #e4e4e4;
                margin: 0 0.20rem;
            }
        }
    }
    .share-goods .share-value {
        font-size: 14px;
        margin-top: 15px;
        margin-bottom: -5px;
        padding: 15px;
        line-height: 20px;
    }
}
</style>
